<template>
    <div class="de_fontbox">
        <!-- 顶部商品参数信息 -->
        <div class="de_font p">
            <div class="thirty">
                <div class="fl">
                    <span class="similar-product-text">{{
                        goodsinfo.goods_name
                    }}</span>
                </div>
                <div class="keep fr">
                    <!-- <a href="javascript:;">
                        <i class=""></i>
                        <span>分享</span>
                    </a> -->
                </div>
                <div class="scunde p">
                    <span style="margin-top: 0.55rem" class="red" id="price"
                        ><em>￥</em>{{ goodsinfo.shop_price }}</span
                    ><br />
                    <div class="titlebox">
                        <span
                            ><span id="market_price_title">市场价：</span
                            ><span class="linethr" id="market_price">{{
                                goodsinfo.market_price
                            }}</span></span
                        >
                        <span style="margin-top: 0px"
                            >销量：{{
                                goodsinfo.sales_sum +
                                goodsinfo.virtual_sales_sum
                            }}</span
                        >
                        <span
                            v-show="goodsinfo.give_integral == 8"
                            id="kanjia_store_count"
                            >库存：<em>0</em></span
                        >
                        <span
                            v-show="goodsinfo.give_integral != 8"
                            style="margin-left: 1.135555rem"
                            >库存：<span class="spec_store_count">{{
                                goodsinfo.store_count
                            }}</span></span
                        >
                    </div>
                </div>
            </div>
        </div>

        <!--领取优惠券  start-->
        <div class="floor list7 detailsfloo" id="coupon">
            <!-- 优惠券按钮 -->
            <div
                class="myorder p"
                id="zYHJ-POP"
                @click="propoCoupons = !propoCoupons"
            >
                <div class="content30">
                    <a href="javascript:void(0)">
                        <div class="order">
                            <div class="fl">
                                <span class="firde">优惠券</span>
                                <span class="deta-coupon">
                                    <em
                                        v-for="(item, index) in couponsData"
                                        :key="index"
                                        >满{{ Number(item.condition) }}-{{
                                            Number(item.money)
                                        }}</em
                                    >
                                </span>
                            </div>
                            <div class="fr">
                                <i class="Mright"></i>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 优惠券列表 -->
            <div class="shadowCoupons" v-show="propoCoupons">
                <div
                    class="recive_aready p"
                    id="recive_aready_pop"
                    style="display: block"
                >
                    <div class="salpro-tit">
                        <b>优惠券列表</b>
                        <div class="price_or fr">
                            <i
                                class="xxgro"
                                @click="propoCoupons = !propoCoupons"
                            ></i>
                        </div>
                    </div>
                    <div class="dc-pck">
                        <div class="deta-coucon">
                            <div
                                class="deta-coulist"
                                v-for="(item, index) in couponsData"
                                :key="index"
                            >
                                <div class="fl">
                                    <span
                                        >￥<b>{{ item.money }}</b></span
                                    >
                                    <em>满{{ item.condition }}元可用</em
                                    ><i v-show="item.isget == 1">已领取</i>
                                </div>
                                <div class="fr">
                                    <p>商品券</p>
                                    <span
                                        ><i
                                            >{{ item.use_start_time }}-{{
                                                item.use_end_time
                                            }}</i
                                        >
                                        <a
                                            v-show="item.isget == 1"
                                            class="couapply-pro"
                                            >已领取啦</a
                                        >
                                        <a
                                            v-show="item.isget == 0"
                                            data-coupon-id="48"
                                            @click="couponsReceive(item.id)"
                                            >点击领取</a
                                        >
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--领取优惠券 end -->

        <!-- 规格相关 start -->
        <div class="floor list7 detailsfloo">
            <!-- 规格按钮 -->
            <div class="myorder p choise_num_s" @click="openGuigefn()">
                <div class="content30">
                    <a href="javascript:void(0)">
                        <div class="order">
                            <div class="fl">
                                <span class="firde">规格&emsp;</span>
                                <span class="sel">{{ checkText }}</span>
                            </div>
                            <div class="fr">
                                <i class="Mright"></i>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 规格选择 -->
            <div class="j_guige" v-if="propoGuige">
                <div class="choose_shop_aready p" style="display: block">
                    <!--商品信息-s-->
                    <div class="shop-top-under p">
                        <div class="maleri30">
                            <div class="shopprice">
                                <div class="img_or fl">
                                    <img
                                        id="zoomimg"
                                        :src="GuigeShopInfo.original_img"
                                    />
                                </div>
                                <div class="fon_or fl">
                                    <h2 class="similar-product-text">
                                        {{ goodsinfo.goods_name }}
                                    </h2>
                                    <input
                                        type="hidden"
                                        id="goods_name"
                                        name="goods_id"
                                        value="312"
                                    />
                                    <div class="price_or" id="goods_price">
                                        <em>￥</em>{{ GuigeShopInfo.price }}
                                    </div>
                                    <div class="dqkc_or">
                                        <span>剩余库存：</span
                                        ><span id="spec_store_count">{{
                                            GuigeShopInfo.store_count
                                        }}</span>
                                    </div>
                                    <!--<div class="price_or team-pies p" style="display: none"><span class="confinetime">该商品拼团中</span><a class="pb_buy team_button">点击前往</a></div>-->
                                </div>
                                <div class="price_or fr">
                                    <i
                                        class="xxgro"
                                        @click="propoGuige = !propoGuige"
                                    ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--商品信息-e-->
                    <div class="shop-top-under p">
                        <div class="maleri30">
                            <div
                                class="shulges p choicsel"
                                v-for="(itemr, index) in goodsinfo.spec_list"
                                :key="index"
                            >
                                <p>{{ itemr.name }}</p>
                                <!-------商品属性值-s------->
                                <span
                                    class="plus choic-sel"
                                    v-for="(itemli, i) in itemr.spec_item"
                                    :key="i"
                                >
                                    <a
                                        id="goods_spec_a_112"
                                        title="白色"
                                        class="spec_item"
                                        :class="{
                                            red:
                                                itemli.id ==
                                                checkGuige[index].checkId,
                                        }"
                                        @click="
                                            changeCheckGuige(
                                                index,
                                                itemli.id,
                                                itemli.item
                                            )
                                        "
                                        data-img-src="/public/upload/goods/2019/04-17/86c458e8f10333c7259e77b64c473e1a.jpg"
                                    >
                                        <input
                                            id="goods_spec_112"
                                            style="display: none"
                                            type="radio"
                                            value="112"
                                            checked="checked"
                                        />{{ itemli.item }}
                                    </a>
                                </span>
                                <!-------商品属性值-e-------->
                            </div>

                            <div class="shulges p num-count">
                                <span class="pro-num">数量</span>
                                <!--选择数量-->
                                <span class="plus">
                                    <span
                                        class="mp_minous"
                                        @click="altergoodsnum(-1)"
                                        >-</span
                                    >
                                    <span class="mp_mp">
                                        <input
                                            type="tel"
                                            class="num buyNum"
                                            id="number"
                                            residuenum="199990"
                                            name="goods_num"
                                            value="1"
                                            min="1"
                                            max="199990"
                                            v-model="byNum"
                                        />
                                    </span>
                                    <span
                                        class="mp_plus"
                                        @click="altergoodsnum(1)"
                                        >+</span
                                    >
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="btns-fixed-wrap">
                        <div
                            class="plusshopcar-buy p btns-fixed-w100"
                            v-if="buyBtnifShow"
                        >
                            <a
                                id="buy_now"
                                class="pb_buy buy_button"
                                @click="buyNow()"
                                style="line-height: 1.70667rem; width: 100%"
                                data-id="1"
                                >确定</a
                            >
                        </div>
                        <div
                            class="plusshopcar-buy p btns-fixed-w100"
                            v-if="!buyBtnifShow"
                        >
                            <a
                                id="join_cart"
                                class="buy_button pb_plusshopcar buy-public"
                                style="line-height: 1.70667rem"
                                @click="addShopCart()"
                                data-id="3"
                                >加入购物车</a
                            >
                            <a
                                id="buy_now"
                                class="pb_buy buy_button buy-public"
                                style="line-height: 1.70667rem"
                                data-id="3"
                                @click="buyNow()"
                                >立即购买</a
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 规格相关 end -->

        <!--  -->
        <div class="floor list7 detailsfloo" v-if="false">
            <!-- 地址选择 -->
            <div style="line-height: 1.4rem" class="myorder p">
                <div class="content30">
                    <a href="javascript:void(0)">
                        <div class="order">
                            <div class="fl">
                                <span class="firde">地址</span>
                                <span class="loc"></span>
                                <span id="address"
                                    >北京朝阳区三环到四环之间</span
                                >
                            </div>
                            <div class="fr">
                                <i
                                    class="Mright"
                                    style="margin-top: 0.4rem"
                                ></i>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 运费 -->
            <div
                style="line-height: 1.4rem"
                class="myorder p"
                id="dispatching_desc"
            >
                <div class="content30">
                    <a class="remain" href="javascript:void(0);">
                        <div class="order">
                            <div class="fl">
                                <span class="firde">运费</span>
                                <span id="shipping_freight">包邮</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 服务 -->
            <div style="line-height: 1.4rem" class="myorder p">
                <div class="content30">
                    <a href="javascript:void(0)">
                        <div class="order">
                            <div class="fl">
                                <span class="firde">服务</span>
                                <span class="s-description"
                                    >由商城自营发货并提供售后服务</span
                                >
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- 用户评价 -->
        <Discuss :disType="1" @navChangefn="navChangefn(2)" />

        <!-- 底部导航 -->
        <div class="podee" style="height: auto">
            <div class="cart-concert-btm p">
                <div class="fl">
                    <ul style="padding: 0 0.3rem">
                        <li>
                            <a :href="`tel:${goodsinfo.shop_info_phone}`">
                                <i></i>
                                <p>客服</p>
                            </a>
                        </li>
                        <li class="keep fr">
                            <a id="favorite_add" @click="loveShop()">
                                <i
                                    class=""
                                    :class="{
                                        red: goodsinfo.collect_status == '1',
                                    }"
                                ></i>
                                <p style="white-space: nowrap">收藏</p>
                            </a>
                        </li>
                        <li style="padding-right: 0.6rem">
                            <a @click="$router.push({ path: '/shopCart' })">
                                <span
                                    id="tp_cart_info"
                                    style="display: block"
                                    >{{ shopCartInfo.goods_num }}</span
                                >
                                <i class="gwc"></i>
                                <p>购物车</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <ul>
                        <li class="o" id="join_cart_li" style="">
                            <a
                                class="pb_plusshopcar buy_button choise_num"
                                style="line-height: 2.09rem"
                                @click="openGuigefn()"
                                >加入购物车</a
                            >
                        </li>
                        <li class="r" id="buy_now_li" style="width: 50%">
                            <a
                                class="choise_num"
                                style="display: block; line-height: 2.09rem"
                                @click="openGuigefn(1)"
                                >立即购买</a
                            >
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';

import Discuss from './Discuss';
export default {
    name: '',
    components: {
        Discuss,
    },
    data() {
        return {
            propoGuige: false, // 规格-选择弹窗是否打开
            byNum: 1, // 规格-购买数量
            guigeData: {}, // 规格-获取的规格数据
            checkGuige: [], // 规格-选择
            checkTextCopy: '',
            checkText: '', // 规格-选择文本
            GuigeShopInfo: {}, // 规格切换后的商品信息

            couponsData: [], // 优惠券-列表数据
            propoCoupons: false, // 优惠券-选择弹窗是否打开

            discussData: [], // 评价列表
            discussInfo: {}, // 评价数据

            buyBtnifShow: false, // 是否为直接购买后确定

            shopCartInfo: {}, // 购物车信息
        };
    },
    props: ['goodsinfo'],
    computed: {},
    mounted() {
        // 加工规格选择后的数据
        this.goodsinfo.spec_list.forEach((element) => {
            element.checkId = element.spec_item[0].id;
            element.checkName = element.spec_item[0].item;
            this.checkGuige.push(element);
            this.checkTextCopy += element.spec_item[0].item + '   ';
        });
        this.checkText = this.checkTextCopy + this.byNum + '件';

        // 计算根据不同规格显示商品信息
        this.ComputedGuigeShopInfo();

        // 获取优惠券列表
        this.getCouponsdata();

        // 获取购物车信息
        this.getShopCarInfo();
    },
    methods: {
        navChangefn() {
            this.$emit('navChangefn', true);
        },
        // 加入购物车
        addShopCart() {
            let item_id = ''; // 获取规格 id

            // 如果有规格选择，计算规格id
            if (this.checkGuige.length != 0) {
                let pinjieid = '';
                this.checkGuige.forEach((item) => {
                    pinjieid += pinjieid + item.checkId + '_';
                });
                item_id =
                    this.goodsinfo.spec_goods_price[
                        pinjieid.substr(0, pinjieid.length - 1)
                    ].item_id;
            }

            // console.log(item_id);
            // console.log(this.byNum);
            // console.log(this.$route.query.id);

            axiosPost(
                '/api/cart/add',
                {
                    goods_id: this.$route.query.id,
                    goods_num: this.byNum,
                    item_id: item_id,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.propoGuige = !this.propoGuige; //关闭规格选择弹窗
                    this.getShopCarInfo(); // 刷新购物车信息
                }
            );
        },
        // 立即购买
        buyNow() {
            let item_id = ''; // 获取规格 id

            // 如果有规格选择，计算规格id
            if (this.checkGuige.length != 0) {
                let pinjieid = '';
                this.checkGuige.forEach((item) => {
                    pinjieid += pinjieid + item.checkId + '_';
                });
                item_id =
                    this.goodsinfo.spec_goods_price[
                        pinjieid.substr(0, pinjieid.length - 1)
                    ].item_id;
            }
            sessionStorage.goodinfo = JSON.stringify({
                goods_id: this.$route.query.id,
                goods_num: this.byNum,
                item_id: item_id,
                action: 'buy_now',
            });
            this.$router.push('/shopSubmit');
        },
        // 获取购物车信息
        getShopCarInfo() {
            axiosPost('/api/cart/header_cart_list', {}, (res) => {
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.shopCartInfo = res.data.cart_price_info;
            });
        },
        // 收藏商品
        loveShop() {
            axiosPost(
                '/api/goods/collect_goods',
                {
                    goods_id: this.$route.query.id,
                },
                (res) => {
                    if (res.status == 2) {
                        this.goodsinfo.collect_status = 0;
                    }
                    if (res.status == 1) {
                        this.goodsinfo.collect_status = 1;
                    }
                }
            );
        },
        // 获取优惠券列表
        getCouponsdata() {
            axiosPost(
                '/api/goods/coupon_list',
                {
                    goods_id: this.goodsinfo.goods_id,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.couponsData = res.result;
                }
            );
        },
        // 领取优惠券
        couponsReceive(id) {
            axiosPost(
                '/api/activity/get_coupon',
                {
                    coupon_id: id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.getCouponsdata();
                }
            );
        },
        // 打开规格弹窗，且获取规格数据
        openGuigefn(id) {
            this.propoGuige = !this.propoGuige;
            if (id) {
                this.buyBtnifShow = true;
            } else {
                this.buyBtnifShow = false;
            }
        },
        // 规格选择 数量加减
        altergoodsnum(n) {
            if (n == -1 && this.byNum > 1) {
                this.byNum--;
            }
            if (n == 1) {
                this.byNum++;
            }
        },
        // 计算根据不同规格显示商品信息
        ComputedGuigeShopInfo() {
            // 如果有规格选择，计算规格id
            if (this.checkGuige.length != 0) {
                let pinjieid = '';
                let neworiginal_img = this.goodsinfo.original_img;
                this.checkGuige.forEach((item) => {
                    pinjieid += pinjieid + item.checkId + '_';
                });

                this.goodsinfo.spec_image.forEach((item) => {
                    if (
                        item.spec_image_id ==
                        pinjieid.substr(0, pinjieid.length - 1)
                    ) {
                        neworiginal_img = item.src;
                    }
                });

                this.GuigeShopInfo =
                    this.goodsinfo.spec_goods_price[
                        pinjieid.substr(0, pinjieid.length - 1)
                    ];
                this.GuigeShopInfo.original_img = neworiginal_img;
            } else {
                this.GuigeShopInfo = {
                    price: this.goodsinfo.shop_price,
                    store_count: this.goodsinfo.store_count,
                    original_img: this.goodsinfo.original_img,
                };
            }
        },
        // 规格选择 内容选择
        changeCheckGuige(index, smalId, smalName) {
            let checkGuigeCopy = this.checkGuige.concat();
            checkGuigeCopy[index].checkId = smalId;
            checkGuigeCopy[index].checkName = smalName;
            this.checkGuige = checkGuigeCopy;
            this.checkTextCopy = '';
            this.checkGuige.forEach((element) => {
                this.checkTextCopy += element.checkName + '   ';
            });
            this.checkText = this.checkTextCopy + this.byNum + '件';
            // 计算根据不同规格显示商品信息
            this.ComputedGuigeShopInfo();
        },
    },
};
</script>

<style lang="less" scope>
@import url('../../assets/css/shopdes.css');
.de_fontbox {
    .de_font {
        #prom_order .myorder .deta-coupon1 {
            color: #666 !important;
            font-size: 0.47rem !important;
        }
        #prom_order .deta-coupon1 {
            max-width: 12.8rem;
        }
        .podee .cart-concert-btm .fl ul li a span {
            z-index: 999;
        }
        .titlebox {
            display: flex;
            justify-content: space-between;
            margin-top: 0.55rem;
        }
        .ladder {
        }
        .ladder li:nth-child(3n) {
            text-align: right;
        }

        .ladder li:nth-child(3n-1) {
            text-align: center;
        }

        .ladder li:nth-child(3n-2) {
            text-align: left;
        }
    }

    // 规格
    .detailsfloo {
        .myorder {
            border: 0;
        }

        .j_guige,
        .shadowCoupons {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999999999999;
            background: rgba(0, 0, 0, 0.5);
        }
    }
}
</style>
